<template>
    <div>
        <el-dialog :title="form.id?'修改故障报修':'添加故障报修'" :visible.sync="dialogVisible" width="35%"
            :before-close="handleClose" center>
            <el-form ref="form" :model="form" label-width="80px" :rules="rules" style="margin-left:170px">
                <el-form-item label="维修地址" prop="address">
                    <el-cascader v-model="form.address" :options="tableList" :props="propstag" clearable>
                    </el-cascader>
                </el-form-item>
                <el-form-item label="故障类型" prop="typename">
                    <el-select v-model="form.typename" placeholder="请选择">
                        <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="业主名称" prop="username">
                    <el-select v-model="form.username" placeholder="请选择">
                        <el-option v-for="item in userdata" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电话" prop="tel">
                    <el-input v-model="form.tel" style="width:218px; "></el-input>
                </el-form-item>
                <el-form-item label="故障状态">
                    <el-select v-model="form.statename" placeholder="请选择">
                        <el-option v-for="item in state" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="故障描述" prop="content">
                    <el-input type="textarea" v-model="form.content" style="width:218px;"></el-input>
                </el-form-item>
                <el-form-item label="故障图片">
                    <el-image style="width: 50px; height: 50px;" v-for="item in form.images" :key="item.id"
                        :src="IMGURL+item.url" :preview-src-list="form.images.map((item)=>IMGURL+item.url)">
                    </el-image>
                    <el-upload class="upload-demo" ref="upload" action="http://estate.eshareedu.cn/estate/api/upload/add"
                        :headers="{Authorization:token}" :on-success="handleAvatarSuccess"  :before-remove="beforeRemove"
                        :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="qu">取 消</el-button>
                <el-button type="primary" @click="updata">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { builList, repairstype, userlist, repairstate, update } from '@/api/repairs'
// 图片路径
import { IMGURL } from "@/api/config"
const token = sessionStorage.getItem("token")
export default {
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        handleClickdata: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            token: token,
            IMGURL: IMGURL,
            form: {
                images: []
            },
            propstag: {
                value: 'id',
                label: 'name',
                children: 'children',
                emitPath: false
            },
            // 楼栋列表
            tableList: [],
            fileList: [],
            srcList: [

            ],
            // 获取维修类型
            type: [],
            // 获取居民名
            userdata: [],
            // 获取维修状态
            state: [],
            rules: {
                address: [
                    { required: true, message: '', trigger: 'blur' }
                ],
                typename: [
                    { required: true, message: '请选择', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '', trigger: 'blur' }
                ],
                tel: [
                    { required: true, message: '请填写手机号', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请填写故障', trigger: 'blur' }
                ],
            }
        }
    },
    created() {
        // 楼栋列表
        this.GetBuillist()
        // 获取维修类型
        this.getrepairstype()
        // 获取居民名
        this.getuserlist()
        // 获取维修状态
        this.getrepairstate()
    },
    methods: {
        // 楼栋列表
        async GetBuillist() {
            let res = await builList()
            // console.log(res);
            if (res.errCode == 10000) {
                this.tableList = res.data.list
            }
        },
        // 获取维修类型
        async getrepairstype() {
            let res = await repairstype()

            if (res.errCode == 10000) {
                this.type = res.data.list
            }
        },
        // 获取居民名
        async getuserlist() {
            let res = await userlist()
            // console.log(res);
            if (res.errCode == 10000) {
                this.userdata = res.data.list
            }
        },
        // 获取维修状态
        async getrepairstate() {
            let res = await repairstate()
            if (res.errCode == 10000) {
                this.state = res.data.list
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.$emit('isclose', false, false, {})
                    this.form = {}
                })
                .catch(_ => { });
        },

        beforeRemove(file, fileList) {
            // console.log(file.name);
            // console.log(fileList);
            // const filePath  = file.url
            // console.log(filePath);
            // this.fileList = JSON.parse(JSON.stringify(file.url))
            this.$refs.upload.clearFiles()
            return this.$confirm(`确定移除 ${file.name}？`);

        },
        handleAvatarSuccess(res, file) {
            const obj = {
                uid: res.uid,
                url: res.data
            }
            this.form.images.push(obj)
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        qu() {
            this.$emit('isclose', false, false, {})
        },
        async updata() {
            let res = await update(this.form)
            console.log(res);
            if (res.errCode == 10000) {
                let msg = this.form.id ? '修改成功' : '添加成功'
                this.$message({
                    message: msg,
                    type: 'success',
                });
            }
            this.$emit('isclose', false, true, {})
        },

    },
    watch: {
        handleClickdata: {
            handler(val) {
                this.form = val
                for (let i in this.form) {
                    // console.log(i);
                    this.form[i] = val[i]
                    if (i == 'images') {
                        console.log(val[i]);
                        this.fileList = val.images.map(item => ({ name: item.url, url: item.url }))
                        // console.log(this.fileList);
                    }

                }
            }
        }
    }
}
</script>

<style lang="less" scoped>

</style>